<template>
    <div class="list">
        <ul>
            <li v-for="item in sessions" :class="{ active: item.user.userId == currentId }" @click="selectSession(item.user.userId)">
                <!-- <img class="avatar" width="30" height="30" :alt="item.user.name" :src="item.user.img" /> -->
                <el-row>
                    <el-col :span="6">
                        <el-avatar :src="item.user.pic"></el-avatar>
                    </el-col>
                    <el-col :span="18">
                        <p class="name">{{item.user.name}}</p>
                    </el-col>
                </el-row>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState({
            // sessions: (state) => state.chat.sessions,
            sessions: ({ chat: { sessions, filterKey } }) => {
                let result = sessions.filter((session) => session.user.name.includes(filterKey));
                return result;
            },
            currentId: (state) => state.chat.currentSessionId,
        }),
    },
    methods: {
        selectSession(userId) {
            this.$store.dispatch('chat/selectSession', userId);
        },
    },
};
</script>

<style scoped lang="less">
.list {
    li {
        padding: 12px 15px;
        border-bottom: 1px solid #292c33;
        cursor: pointer;
        transition: background-color 0.1s;

        &:hover {
            background-color: rgba(255, 255, 255, 0.03);
        }
        &.active {
            background-color: rgba(255, 255, 255, 0.1);
        }
    }
    .name {
        line-height: 40px;
        margin: 0 0 0 15px;
        color: #fff;
    }
}
</style>